<template>
  <el-dialog :title="title" :visible.sync="visible" width="500px" append-to-body custom-class="import-dialog"
  >
    <el-tabs type="card" v-model="activeName">
      <el-tab-pane label="基本信息" name="base">
        <el-descriptions title="电子签信息" :column="1" :border="false">
          <el-descriptions-item label="名称">{{ form.proprietorName }}</el-descriptions-item>
          <el-descriptions-item label="类型">
            <dict-tag :options="dict.type.proprietor_type" :value="form.proprietorType"/>
          </el-descriptions-item>
          <el-descriptions-item label="手机号">{{ form.proprietorMobile }}</el-descriptions-item>
          <el-descriptions-item label="身份证">{{ form.cardNumber }}</el-descriptions-item>
          <el-descriptions-item label="创建机构">{{ form.createOrganization }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="房屋委托信息" name="house" v-if="data.houseCommissionStatus !== '1'">
        <el-descriptions :column="1" :border="false">
          <el-descriptions-item label="开户人">{{ form.houseCommission.accountHolder }}</el-descriptions-item>
          <el-descriptions-item label="银行账号">{{ form.houseCommission.bankAccount }}</el-descriptions-item>
          <el-descriptions-item label="开户银行">{{ form.houseCommission.bankName }}</el-descriptions-item>
          <el-descriptions-item label="银行支行">{{ form.houseCommission.bankBranch }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="代理服务信息" name="proxyService" v-if="data.proxyServiceStatus !== '1'">
        <el-descriptions title="电子签信息" :column="1" :border="false">
          <el-descriptions-item label="电子签认证">{{ electronicVisaStatusText}}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="分账信息" :column="1" :border="false">
          <el-descriptions-item label="结算卡类型">{{ bankAccountTypeText }}</el-descriptions-item>
          <el-descriptions-item label="银行卡号">{{ form.proxyService.bankAccount }}</el-descriptions-item>
          <el-descriptions-item label="开户银行">{{ form.proxyService.bankName }}</el-descriptions-item>
          <el-descriptions-item label="银行支行">{{ form.proxyService.bankBranch }}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
    </el-tabs>
  </el-dialog>
</template>

<script>
import { getProprietorDetail } from '@/api/contract/proprietor'

export default {
  name: 'add',
  dicts: ['proprietor_type', 'house_commission_status', 'proxy_service_status'],
  props: {
    title: {
      default: '详情'
    },
    value: {
      default: false
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: false,
      activeName: 'base',
      form: {
        houseCommission: {},
        proxyService: {}
      },
      // 银行卡类型映射
      bankAccountTypeMapping: [
        {
          value: '1',
          label: '对私账户'
        },
        {
          value: '2',
          label: '对公账户'
        }
      ],
      // 电子签认证状态映射
      electronicVisaStatusMapping: [
        {
          value: '1',
          label: '未认证'
        },
        {
          value: '2',
          label: '通过认证'
        }
      ]
    }
  },
  computed: {
    bankAccountTypeText() {
      return this.bankAccountTypeMapping.find(item => item.value === this.form.proxyService.bankAccountType)?.label
    },
    electronicVisaStatusText() {
      return this.electronicVisaStatusMapping.find(item => item.value === this.form.proxyService.electronicVisaStatus)?.label
    }
  },
  watch: {
    value(newVal, oldVal) {
      if (newVal) {
        this.init()
      }
      this.visible = newVal // 监测value的变化，并赋值。
    },
    visible(val) {
      this.$emit('input', val) // 此处监测visible目的为关闭弹窗时，重新更换value值，注意emit的事件一定要为input。
    }
  },
  methods: {
    init() {
      this.activeName = 'base'
      this.getDetail()
    },
    getDetail() {
      if (!this.data.proprietorId) {
        return
      }
      getProprietorDetail(this.data.proprietorId).then(res => {
        this.form = res.data
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
